<template>
   <div>
      <h1>{{ title }}</h1>
      <hr>
      <ul>
        <li>姓名：{{ king.kname }}</li>
        <li>性别：{{ king.ksex }}</li>
        <li>国籍：{{ king.kcountry }}</li>
        <li>年龄：{{ king.kage}}</li>
        <li>外部年龄：{{ kage}}</li>
      </ul>
      <p>
        <button @click="addAge"> + </button>
      </p>


      <hr>

      
      <input type="text" :value="king.kname">
      <p>{{ king.kname }}</p>
      <p><button @click="validate">验证</button></p>


      <hr>
      <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = {{ n1+n2 }};

   </div>
</template>


<script setup>

   import { ref, reactive, toRefs } from "vue";

   let n1=ref(1);
   let n2=ref(2);


  let title = ref('中华人民共和国');

  const arr = ['中华人民共和国','湖南','常德','湖南幼儿师范高等专科学校'];
  let pos =0;
  var tm = setInterval(()=>{
    title.value = arr[pos++];
    //console.log(title);
    if(pos >= arr.length) pos=0;
  }, 500);


  var king = reactive({
    kname:'刘明',
    ksex:'男',
    kcountry:'中国',
    kage:23
  });

  let [kage] = toRefs(king);

  function addAge(){
    kage.value++;
  }

  function validate(){
    console.log(king);
  }

</script>

<style scoped>

</style>